<template>
    <div class="white-box">
        <div class="si-one">
            <p>角色名称</p>
            <el-input v-model="value_text" placeholder="请输入角色名称" clearable />
        </div>
        <div class="mra-box">
            <loading-small v-if="loading"></loading-small>
            <el-empty description="暂无权限配置项" v-if="checkArr.length == 0 && !loading" />
            <template v-if="checkArr.length > 0 && !loading">
                <el-tree ref="treeRef" :data="checkArr" show-checkbox node-key="mod_id" default-expand-all
                    :props="defaultProps" />
            </template>
        </div>

        <div class="foot-btn flexs-center">
            <el-button type="primary" size="large" :loading="search_btn" @click="handleConfirm">确定添加</el-button>
            <el-button type="default" plain size="large" :loading="search_btn" @click="resetChecked">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted,onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
import LoadingSmall from "@components/LoadingSmall.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getMenu()
})

onBeforeUnmount(() => {
    treeRef.value = null
    checkArr.value.length = 0
})

const value_text = ref("")
const loading = ref(false)
const search_btn = ref(false)
const treeRef = ref(null)
const defaultProps = ref({
    children: "children",
    label: "title",
})

const handleConfirm = () => {
    let nodes = treeRef.value.getCheckedNodes(false, true) // 获取选中node数组
    if (value_text.value == '') {
        proxy.$message({ message: "请输入角色名称", type: "warning" })
        return
    }
    if (!nodes || nodes.length == 0) {
        proxy.$message({ message: "请勾选角色权限", type: "warning" })
        return
    }
    let arrs = [];
    for (let i = 0; i < nodes.length; i++) {
        arrs.push(nodes[i].mod_id)
    }

    search_btn.value = true
    proxy.$axios
        .post('admin/role/add', {
            role_name: value_text.value,
            priv: arrs
        })
        .then((res) => {
            search_btn.value = false
            if (res.data.code == 0) {
                router.push('/Setup/ManageRole')
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            search_btn.value = false
        })
}
const resetChecked = () => {
    treeRef.value.setCheckedKeys([], false)
}

const checkArr = ref([])
function getMenu() {
    proxy.$axios.get('admin/role/add').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data
            checkArr.value = result
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}
// 递归多维数组对象，然后组合成只包含id两个字段的一维数组对象
// function recursionArrs(menuTreeList, menuList = []) {
//     for (let item of menuTreeList) {
//         menuList.push(item.mod_id)
//         if (item.children && item.children.length > 0) {
//             recursionArrs(item.children, menuList)
//         }
//     }
//     return menuList
// }
</script>
<script>
export default {
    name: "ManageRoleAdd",
}
</script>

<style lang="less" scoped>
.white-content {
    padding-bottom: 40px;
}

:deep(.el-tree-node) {
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
    padding: @padding-md @padding-md;
    border-radius: @radius-xs;
    margin-bottom: @margin-mdl;
    flex: none;
    width: 100%;

    & .el-tree-node {
        box-shadow: 0 0px 0px;
        padding: 0;
        margin-bottom: 0;
        border-radius: 0;
    }

    .el-checkbox__inner {
        width: 18px;
        height: 18px;

        &::after {
            width: 4px;
            height: 9px;
            left: 6px;
            top: 1px;
        }
    }

    .el-tree-node__content {
        margin-bottom: @margin-xs;
        padding-left: 0;

        &:hover {
            background: none !important;
        }
    }

    .el-tree-node__children {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
    }
}

.mra-box {
    border-radius: @radius-xs;
    margin: @margin-xl 0px;

    .mar-item {
        box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
        padding: @padding-md @padding-md 0px;
        border-radius: @radius-xs;
        margin-bottom: @margin-mdl;

        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>
